<template>
    <div class='' align="center">
        <el-page-header @back="goBack"  content="通讯名录">
        </el-page-header>
        <el-row>
            <el-col :span="10">
                <el-input v-model="input" style="margin-left:350px;" placeholder="岗位名称"  ></el-input>
            </el-col>
            <el-button type="primary" @click="queryLike()"  icon="el-icon-search">查询</el-button>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-table ref="singleTable" :data="this.pageInfo.list" highlight-current-row @current-change="handleCurrentChange" style="width: 100%"> 
                <el-table-column property="dename" label="部门" width="150">
                </el-table-column>
                <el-table-column property="eno" label="员工编号" width="150">
                </el-table-column>
                <el-table-column property="ename" label="姓名" width="150">
                </el-table-column>
                <el-table-column property="stationname" label="岗位" width="150">
                </el-table-column>
                <el-table-column property="eaccount" label="账号" width="150">
                </el-table-column>
                <el-table-column property="eaccount" label="手机" width="150">
                </el-table-column>
                <el-table-column property="eemail" label="邮箱" width="170">
                </el-table-column>
               
            </el-table>
            <el-pagination  :background="true" :pager-count="4" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize" :total="pageInfo.total" :page-sizes="[3,6]" layout="total, sizes, prev, pager, next, jumper">
            </el-pagination>
          </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
data() {
//这里存放数据
return {
    loading:{},
    pageInfo:{},
    input:''
};
},
//计算属性
computed: {},
//方法集合
methods: {
    handleSizeChange(val) {
        this.goToPage(this.pageInfo.pageNum, val);
    },
    handleCurrentChange(val) {
        this.goToPage(val, this.pageInfo.pageSize);
    },
    //分页查询
    goToPage(p, s) {
        let _this = this;
        this.loading = true;
        this.$http.get(`http://localhost:8080/api/staff/${p}/${s}`).then(function(resp) {
            _this.pageInfo = resp.data;
        });
    },
    queryLike(){
        let _this = this;
        if(this.input!==""){
			this.loading = true;
                this.$http.get(`http://localhost:8080/api/staff/like/${_this.pageInfo.pageNum}/${_this.pageInfo.pageSize}/${_this.input}`).then(function(resp) {
                _this.pageInfo = resp.data;
                _this.loading = false; 
            });
        }else{
            this.$message({
                showClose: true,
                message: '输入不能为空！',
                type: 'warning'
            });
         }
    }

},
//挂载完成（可以访问DOM元素）
mounted() {
    this.goToPage(1,3);
},
//监控data中的数据变化
watch: {

}
}
</script>
<style  scoped>
/*@import url(); 引入公共css类*/

</style>